main {
  min-width: 20rem;
  width: max-content;
  margin: 0 auto;
  padding: 2rem 1rem;
  background-color: #fff;
  color: #333;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgb(51, 51, 51, 0.5);
}
main h3 {
  margin-bottom: 0.5rem;
  text-align: center;
}
.button-container {
  display: grid;
  justify-items: end;
  margin-bottom: 0.5rem;
}
#add,
#update,
#delete {
  padding: 1px 2px;
  color: lightskyblue;
  cursor: pointer;
}
#update {
  margin-right: 2px;
  color: lightseagreen;
}
#delete {
  color: lightcoral;
}
table {
  display: grid;
  width: 100%;
  border: 1px solid #333;
  border-radius: 5px;
}

tr {
  display: grid;
  grid-template-columns: 0.5fr repeat(3, 1fr);
  border-bottom: 1px solid #333;
  text-align: center;
}
tbody tr:first-child {
  border-top: 1px solid #333;
}
thead tr:last-child,
tbody tr:last-child {
  border-bottom: none;
}
th,
td {
  padding: 0.2rem 0.4rem;
  border-right: 1px solid #333;
}
th:last-child,
td:last-child {
  border-right: none;
}

main h4 {
  text-align: center;
}
